<template>
	<view>
		<u-navbar title-size="34"  back-icon-color="#292940" title-color="#292940" :border-bottom="false" placeholder title="找回密码" :custom-back="goBack"></u-navbar>
		<view class="container">
			<view class="item">
				<view class="ipt-box">
					<u-input type="number" class="input-box" :custom-style="customStyle" shape="circle" style="padding: 6px 18px;" v-model="param.mobile"  placeholder="手机号" placeholder-style="color:#C2C2C2"></u-input>
				</view>
			</view>
			<view class="item">
				<u-input type="number" maxlength="6" class="input-box" shape="circle" style="padding: 6px 18px;" :custom-style="customStyle"
					v-model="param.verification_code" placeholder="验证码" placeholder-style="color:#CCCDD1">
				</u-input>
				<view class="code-box">
					<u-verification-code seconds="60" @end="end" @start="start" ref="uCode" 
						@change="codeChange"></u-verification-code>
					<span class="main-color fz-28" @tap="getCode">{{tips}}</span>	
				</view>
			</view>
			<view class="item">
				<u-input :type="type" :password="!isEye" style="padding: 6px 18px;" class="input-box" :password-icon="false" 
				:custom-style="customStyle" shape="circle" v-model="param.password"  placeholder="重置登录密码" placeholder-style="color:#CCCDD1">
				</u-input>
				<image src="/static/login/login_eye.png" class="eye-img ml-1" mode="" @tap="isEye= false" v-show="isEye">
				</image>
				<image src="/static/login/login_eyeClose.png" class="eye-img ml-1" mode="" @tap="isEye= true"
					v-show="!isEye"></image>
				
			</view>
			<view class="item pb-2">
				<u-input :type="confirType"  :password="!isEye_confirmation" style="padding: 6px 18px;" class="input-box" :password-icon="false" 
				:custom-style="customStyle" shape="circle" v-model="param.password_confirmation"  placeholder="再次确认密码" placeholder-style="color:#CCCDD1">
				</u-input>
				 <image src="../../static/login/login_eye.png" class="eye-img ml-1" mode="" @tap="isEye_confirmation= false" v-show="isEye_confirmation">
				</image>
				<image src="../../static/login/login_eyeClose.png" class="eye-img ml-1" mode="" @tap="isEye_confirmation= true"
					v-show="!isEye_confirmation"></image>
			</view>
			<u-button type="default" class="main-bg family-sc fz-36 mt-2rem" :loading="loading" hover-class="none" @tap="formSubmit">确认</u-button>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker.js'
	export default {
		data() {
			return {
				param: {
					mobile: '',
					password: '',
					password_confirmation: '',
					verification_code: ''
				},
				isEye: false,
				isEye_confirmation: false,
				tips: '获取验证码',
				customStyle:{
					color:'#292940',
					fontSize:'30upx'
				},
				loading:false
			}
		},
		computed: {
			isCanSubmit() {
				return this.param.mobile !== '' && this.param.password !== '' && this.param.password_confirmation !== '' &&
					this.param.verification_code !== ''
			},
			type() {
				return !this.isEye ? 'password' : 'text'
			},
			confirType(){
				return !this.isEye_confirmation ? 'password' : 'text'
			}
		},
		methods:{
			goBack(){
				uni.redirectTo({
					url:'/pages/login/login'
				})
			},
			start(){},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					//进行表单检查
					let checkRes = uni.$u.test.mobile(this.param.mobile)
					if (checkRes) {
						this.$store.dispatch('auth/smsSend', { mobile: this.param.mobile,type:2 }).then(res => {
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}).catch(error => {
							uni.$u.toast(error.data.message)
						})
					} else {
						uni.$u.toast('请输入正确的手机号')
					}
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			formSubmit() {
				this.rule = [{
						name: "mobile",
						checkType: "phoneno",
						errorMsg: "请输入正确的手机号"
					},
					{
						name: "verification_code",
						checkType: "string",
						checkRule: "6,6",
						errorMsg: "验证码必须6位"
					},
					{
						name: "password",
						checkType: "string",
						checkRule: "6,18",
						errorMsg: "请输入6-18位的密码"
					},
					{
						name: "password_confirmation",
						checkType: "string",
						checkRule: "6,18",
						errorMsg: "请输入6-18位的重复密码"
					}
				]
				//进行表单检查
				let checkRes = graceChecker.check(this.param, this.rule)
				if (checkRes) {
					if (this.param.password != this.param.password_confirmation) {
						return uni.$u.toast('两次密码输入不一致')
					}
					this.forPwd()
				} else {
					uni.$u.toast(graceChecker.error)
				}
			},
			forPwd(){
				this.loading = true
				this.$store.dispatch('auth/forgetPassword',this.param).then(res=>{
					this.loading = false
					uni.$u.toast('修改成功')
					setTimeout(()=>{
						this.goBack()
					},2000)
				}).catch(error=>{
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 690upx;
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
		text-align: center;
		.info {
			color: #2C2C2C;
			font-size: 40upx;
		}
		.item {
			width: 100%;
			margin-top: 40upx;
			position: relative;
			.input-box {
				width: 100%;
				height: 98upx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #FAFBFC;
				border-radius: 49upx;
				padding: 0upx 30upx !important;
				input {
					height: 98upx;
					width: calc(100% - 180upx) !important;
					font-size: 32upx;
					color: #2c2c2c;
				}
		
			
			}
			.code-box {
				position: absolute;
				right: 36upx;
				top: 50%;
				transform: translateY(-50%);
				color: #292940;
			}
			
			.eye-img {
				position: absolute;
				right: 36upx;
				top: 50%;
				transform: translateY(-50%);
				width: 36upx;
				height: 36upx;
			}
		}
		button {
			width: 100%;
			height: 98upx;
			border-radius: 49upx;
			line-height: 98upx;
			font-size: 32upx;
			color: #FFFFFF;
			margin-top: 50upx;
			margin-bottom: 20upx;
		}
		uni-button:after{
			border: none !important;
		}
		
	}
</style>
